<template>
	<view style="width: 100%;height: 100vh;background-color: #f1f1f1;">
		<!-- 头部 -->
		<view class="theme-container" style="position: relative;">
			<view :style="{height: sConf.tH+'px'}"></view>
		</view>

		<!--垂直滚动-->
		<scroll-view class="mainContent" scroll-y style="width: 100%;height: 80vh;padding: 5px 10px;"
			@scrolltolower="EventSCroll">

			<view v-for="(item, index) in dataMessage" :key="index" style="margin-bottom: 5px;">
				<sub-message-sems :data="item" @stateChange="loadDefData"></sub-message-sems>
			</view>

			<view v-if="dataMessage.length === 0" style="margin-top: 20px;">
				<tn-empty mode="list"></tn-empty>
			</view>
			<!-- None -->
			<view v-if="showEnd" style="display: flex;justify-content: center;padding: 20px;">
				<text style="color: #888;">---没有更多了---</text>
			</view>
		</scroll-view>

		<!-- 顶部自定义导航 -->
		<tn-navbar :safe-area-inset-right="true" :placeholder="true" back-icon="" home-icon="" fixed
			bg-color="#FFFFFF00" text-color="#fff">
			<text class="gl-title">{{ sConf.title }}{{ title }}</text>
			<template #back>
				<view style="display: flex;align-items: center;gap: 5px;">
					<tn-icon :name="sConf.logo" size='64' color="#fff" style="margin-left: 5px;"></tn-icon>
					<tn-badge :value="lenMsg===0?'':lenMsg" type="danger">
						<tn-icon name="email" size="56" offset-top="-5"></tn-icon>
					</tn-badge>
				</view>
			</template>
		</tn-navbar>
	</view>
</template>
<script>
	import utils from '@/common/utils';
	export default {
		data() {
			return {
				title: ' • 消息中心',
				sConf: getApp().globalData,
				dataMessage: [], // 站内信
				lenMsg: 0, // 消息数量

				count: null, // 记录数
				size: 20, // 页大小
				page: 1, // 当前页
				showEnd: false, // 显示底线
			}
		},
		mounted() {
			this.loadDefData();
		},
		methods: {
			loadDefData() {
				console.log('初始化', '消息');
				this.loadMessageList()
			},
			/**
			 * 加载站内信消息
			 */
			loadMessageList() {
				let host = this.sConf.host + '/weapps/mesList/';
				let token = this.sConf.token || ''
				let data = {
					sid: this.sConf.auth?.id,
					page: this.page,
					size: this.size,
					ordering: '-id'
				}
				utils.authenticatorList(host, token, data).then((res) => {
					console.log('系统消息', res);
					if (res.rescode === 200) {
						if (this.page === 1) {
							this.dataMessage = res.resmsg
						} else {
							this.dataMessage = this.dataMessage.concat(res.resmsg)
						}
						this.count = res.count
						this.size = res.size
						let tmpData = 0
						res.resmsg.forEach(item => {
							if (item.status === 0) {
								tmpData += 1
							}
						})
						this.lenMsg = tmpData
						if (tmpData > 0) {
							this.$emit("msgChange", tmpData)
						}
						console.log('消息数', tmpData);
					}
					if (res.rescode === 404) {
						if (this.page > 1) {
							this.page--
						}
						this.showEnd = true
					}
				})
			},
			EventSCroll(e) {
				console.log('EventSCroll', e);
				this.page++
				this.loadMessageList()
			}
		}
	}
</script>
<style lang="scss" scoped></style>